<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="/pages/common.jsp" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>角色信息</title>
	<%-- <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.10.2.js"></script>
	 --%>
	<!-- <link rel="stylesheet" href="../../assets/ztree/css/demo.css"> -->
	<link rel="stylesheet" href="../../assets/ztree/css/metroStyle/metroStyle.css">
	<script type="text/javascript" src="../../assets/ztree/js/jquery.ztree.core.js"></script>
	<script type="text/javascript" src="../../assets/ztree/js/jquery.ztree.excheck.js"></script>
	<script type="text/javascript" src="../../assets//ztree/js/jquery.ztree.exedit.js"></script>


	<script type="text/javascript">
		var setting = {
			data:{//表示tree的数据格式
 		        simpleData:{
 		        	enable: true,//表示使用简单数据模式
 		            idKey:"mid",//设置之后id为在简单数据模式中的父子节点关联的桥梁
 		           	pIdKey:"pid", //设置之后pid为在简单数据模式中的父子节点关联的桥梁和id互相对应
 		           	rootPId:"null"//pid为null的表示根节点
 		        },
				key:{
                  isParent:true,
				  name:"title",
                  title:"title",
                  //url:"href",
                  //icon: "icon"
				}
 		    },
			view: {
				showIcon: false//禁止显示图片
				,selectMulti:false//表示禁止多选
			},
			check:{//表示tree的节点在点击时的相关设置
 		        enable:true,//是否显示radio/checkbox
 		        chkStyle:"checkbox",//值为checkbox或者radio表示
 		        checkboxType:{p:"",s:""},//表示父子节点的联动效果
 		        radioType:"level"//设置tree的分组
 		    },
			 
            /* callback:{//表示tree的一些事件处理函数
                onCheck:onCheck
            } */ 
		};
		var zNodes =[];
		$(document).ready(function(){
			var t = $("#treeDemo");
			$.ajax({
		    	type: "POST", 
				url: "/Menu/queryAllByMution.do",
		        dataType: 'json',
				success: function(result) { 
					console.log(result);
					$.extend( true, zNodes, result );
					console.log(zNodes);
		             t = $.fn.zTree.init(t, setting, zNodes);
					// demoIframe = $("#testIframe");
				} 
		    });
		});  
		
		function onCheck(e,treeId,treeNode){
            var treeObj=$.fn.zTree.getZTreeObj("treeDemo"),
            nodes=treeObj.getCheckedNodes(true),
            v="";
            for(var i=0;i<nodes.length;i++){
            v+=nodes[i].name + ",";
            alert(nodes[i].mid); //获取选中节点的值
            }
		}
		
	            
	</script> 
<script type="text/javascript">
$(function () {

    //1.初始化Table
    var oTable = new TableInit();
    oTable.Init();

    //2.初始化Button的点击事件
    var oButtonInit = new ButtonInit();
    oButtonInit.Init();
	//初始化提示框的位置：top-center，bottom-left，bottom-right
    toastr.options.positionClass = 'toast-top-center';
  	//单击
    $('#tb_departments').on('click-row.bs.table',function (e, row, element) {
        	$("#id").val(row.rid);
        	$('#tb_departmentsDetailed').bootstrapTable('refresh');
    });
    $('#exampleModal').on('hide.bs.modal',function(){
    	var treeObj = $.fn.zTree.getZTreeObj("treeDemo");//根据 treeId 获取 zTree 对象
    	treeObj.expandAll(false);//折叠全部节点,参数为true时表示展开全部节点
    	treeObj.checkAllNodes(false); //实现不选中任何节点
    	$("#fm")[0].reset();
    	$('#fm').data('bootstrapValidator').resetForm(true);
    });
    
    
  	//jQuery，既阻止默认行为又停止冒泡
    $("#ss").on('click',function(){
    	    return false;//当然 也阻止了事件本身
    });

});


var TableInit = function () {
    var oTableInit = new Object();
    //初始化Table
    oTableInit.Init = function () {
        $('#tb_departments').bootstrapTable({
            url: '${pageContext.request.contextPath }/Role/list.do',         //请求后台的URL（*）
            //showExport: true, //是否显示导出
            method: 'get',                      //请求方式（*）
            toolbar: '#toolbar',                //工具按钮用哪个容器
            striped: true,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,                   //是否显示分页（*）
            sortable: false,                     //是否启用排序
            sortOrder: "asc",                   //排序方式
            queryParams: oTableInit.queryParams,//传递参数（*）
            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            pageNumber:1,                       //初始化加载第一页，默认第一页
            pageSize: 10,                       //每页的记录行数（*）
            pageList : [10,20,30],       //可供选择的每页的行数（*）
            //search: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
            strictSearch: true,
            //showColumns: true,                  //是否显示所有的列
            //showRefresh: true,                  //是否显示刷新按钮
            minimumCountColumns: 2,             //最少允许的列数
            clickToSelect: true,                //是否启用点击选中行
            height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            uniqueId: "rid",                     //每一行的唯一标识，一般为主键列
            //showToggle:true,                    //是否显示详细视图和列表视图的切换按钮
            //cardView: false,                    //是否显示详细视图
            detailView: false,                   //是否显示父子表
            columns: [{
                checkbox: true
            }, {
                field: 'rid',
                title: '角色id',
                visible: false
            }, {
                field: 'rname',
                title: '角色名称'
            }, {
                field: 'rfield',
                title: '备注'
            }]
        });
        $('#tb_departmentsDetailed').bootstrapTable({
            url: '${pageContext.request.contextPath }/RoleMenu/list.do',         //请求后台的URL（*）
            showExport: false, //是否显示导出
            exportDataType: "basic", //basic', 'all', 'selected'.
            method: 'get',                      //请求方式（*）
            toolbar: '',                //工具按钮用哪个容器
            striped: true,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,                   //是否显示分页（*）
            sortable: false,                     //是否启用排序
            sortOrder: "asc",                   //排序方式
            queryParams: oTableInit.queryParamsDetailed,//传递参数（*）
            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            pageNumber:1,                       //初始化加载第一页，默认第一页
            pageSize: 10,                       //每页的记录行数（*）
            pageList: [10, 20, 30],     //可供选择的每页的行数（*）
            search: false,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
            strictSearch: true,
            showColumns: false,                  //是否显示所有的列
            showRefresh: false,                  //是否显示刷新按钮
            minimumCountColumns: 2,             //最少允许的列数
            clickToSelect: true,                //是否启用点击选中行
            height: 300,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            uniqueId: "pcmid",                     //每一行的唯一标识，一般为主键列
            showToggle:false,                    //是否显示详细视图和列表视图的切换按钮
            cardView: false,                    //是否显示详细视图
            detailView: false,                   //是否显示父子表
            columns: [{
                checkbox: true,
                visible: false
            }, {
            	field: 'rmid',
                title: 'id',
                visible: false
            }, {
            	field: 'rid',
                title: 'id',
                visible: false
            }, {
            	field: 'mid',
                title: 'id',
                visible: false
            }, {
            	field: 'menu.title',
                title: '标题',
            }, {
            	field: 'menu.href',
                title: '路径',
            }, {
            	field: 'menu.grade',
                title: '等级',
            }, {
            	field: 'menu.pid',
                title: '父级id',
                visible: false
            }, {
            	field: 'menu.mfield',
                title: '父级',
            }, {
            	field: 'menu.type',
                title: '类型',
            }, {
            	field: 'menu.sort',
                title: '排序',
            }]
        });
    };

    //得到查询的参数
    oTableInit.queryParams = function (params) {
        var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
        	pageSize: params.limit,   //页面大小
        	page: params.offset/params.limit+1,  //页码
            rname:$.trim($('#rnameTJ').val()), 
        };
        return temp;
    };
  	//得到查询的参数
    oTableInit.queryParamsDetailed = function (params) {
        var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
        	pageSize: params.limit,   //页面大小
            page: params.offset/params.limit+1,  //页码
            rid:$.trim($('#id').val()), 
        };
        return temp;
    };
    return oTableInit;
};


var ButtonInit = function () {
    var oInit = new Object();
    var postdata = {};

    oInit.Init = function () {
        //初始化页面上面的按钮事件
    };

    return oInit;
};


function refresh(){
	setTimeout(function(){  //使用  setTimeout（）方法设定定时2000毫秒
		var row=$('#tb_departments').bootstrapTable('getData');
		if(row.length == 0){
			window.location.reload();
		}
	},1000);
}

function doDelete() {
	var row=$.map($("#tb_departments").bootstrapTable('getSelections'),function(row){
		return row ;
	});
	if (row.length == 0) {
		toastr.warning('请至少选择一条数据!');
	}else{
		var ids="";
		for(var i=0;i<row.length;i++){
			if(i==0 || i=="0"){
				ids+=row[i].rid;
			}else{
				ids+=","+row[i].rid;
			}
		}
		
		//询问框
		Ewin.confirm({ message: "确认要删除选择的数据吗？" }).on(function (e) {
	       if (!e) {
	         return;
	       } 
	    	var url = "${pageContext.request.contextPath }/Role/delete.do";
		    $.post(url, "ids="+ids, function(data) {
				if (data == 1) {
					toastr.success('删除成功');
					setTimeout(function(){  //使用  setTimeout（）方法设定定时2000毫秒
						$('#tb_departments').bootstrapTable('refresh');
						refresh()
					},1000);
				} else if (data == 2) {
					toastr.warning('该信息已删除!');
					setTimeout(function(){  //使用  setTimeout（）方法设定定时2000毫秒
						$('#tb_departments').bootstrapTable('refresh'); 
						refresh()
					},1000); 
				} else {
					toastr.error('删除失败');
					setTimeout(function(){  //使用  setTimeout（）方法设定定时2000毫秒
						$('#tb_departments').bootstrapTable('refresh');
						refresh()
					},1000);
				}
			}); 
	    }); 
	}
}

function doAdd() {
	
	$("#bt").html("新增角色信息");
	$("#rid").val("");
	$('#exampleModal').modal(open);
	document.getElementById("fm").reset();
	//清空表单
}

function doView() {
	//取表格的选中行数据
    var row = $("#tb_departments").bootstrapTable('getSelections');
	if (row.length == 1) {
		$("#bt").html("修改角色信息");
		$("#rid").val(row[0].rid);
		$("#rname").val(row[0].rname);
		$("#rfield").val(row[0].rfield);
		//给ztree赋值
		setZtree(row[0].rid);
		$('#exampleModal').modal(open);
	}else{
		toastr.warning('请选择一条数据!');
	}
}
function getZtree() {
	//在提交表单之前，使用ztree提供的方式获取选中的节点
    var treeObj = $.fn.zTree.getZTreeObj("treeDemo");//获得ztree对象
    var nodes = treeObj.getCheckedNodes(true);//在提交表单之前将选中的checkbox收集
    var array = new Array();
    for(var i=0;i<nodes.length;i++){
        var id = nodes[i].mid;
        array.push(id);
    }
    return array
}
function setZtree(rid) {
	$.ajax({
        type: "post",
        data: "rid="+rid,
        url: "${pageContext.request.contextPath }/RoleMenu/queryAllByMution.do",
         dataType: 'JSON',
         async: false,
         success: function (arr) {
	        var treeObj = $.fn.zTree.getZTreeObj("treeDemo");//根据 treeId 获取 zTree 对象
	        for(var i=0;i<arr.length;i++){
	        	//当前选中的节点
	        	var node = treeObj.getNodesByParam("mid", arr[i].mid);
	            treeObj.checkNode(node[0],true);//指定选中ID的节点
	            treeObj.expandNode(node[0], true, false);//指定选中ID节点展开
	        }
         }
	});
}
function save() {
    var bootstrapValidator = $("#fm").data('bootstrapValidator');  
    //开启验证
    bootstrapValidator.validate();  
    if (bootstrapValidator.isValid()){
    	if (document.getElementById('rid').value=='') {
			var url = "${pageContext.request.contextPath }/Role/insert.do";
			var title="新增";
    	} else {
			var url = "${pageContext.request.contextPath }/Role/update.do";
			var title="修改";
    	}  
        var array = getZtree();
        var ids = array.join(",");
        //在提交表单之前，将ids字符串赋值给隐藏域
        $("input[name=mids]").val(ids);
	    $.post(url, $("#fm").serialize(), function(data) {
			if (data > 0) {
				toastr.success(title+'成功');
				setTimeout(function(){  //使用  setTimeout（）方法设定定时2000毫秒
					if (document.getElementById('rid').value=='') {
						$('#exampleModal').modal('hide');
						$('#tb_departments').bootstrapTable('refresh');  
						refresh();
					}else{
						window.location.reload();
					}
				},1000);
			} else {
				toastr.warning('该角色已存在，不能重复新增');
				//toastr.error(title+'失败');
			}
		});
    }else{
	    return;  
    } 
}
function seach() {
	$('#tb_departments').bootstrapTable('refresh'); 
}
</script>
</head>
<body>
	<div class="panel-body" style="padding-bottom:0px;">
        <div class="panel panel-default">
            <div class="panel-heading">查询条件</div>
            <div class="panel-body">
                <form id="formSearch" class="form-horizontal">
                    <div class="form-group" style="margin-top:15px">
                        <label class="control-label col-sm-1" for="txt_search_departmentname">角色姓名 </label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control" id="rnameTJ">
                        </div>
                        <div class="col-sm-4" style="text-align:left;">
                            <button type="button" style="margin-left:50px" id="btn_query" class="btn btn-primary" onclick="seach()">查询</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>       

		


        <div id="toolbar" class="btn-group">
            <button id="btn_add" type="button" class="btn btn-default" onclick="doAdd()">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
            </button>
            <button id="btn_edit" type="button" class="btn btn-default" onclick="doView()">
           		 <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
            </button>
            <button id="btn_delete" type="button" class="btn btn-default" onclick="doDelete()">
                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
            </button>
            <!-- <button id="btn_add" type="button" class="btn btn-default" onclick="douploadModal()">
                <span class="glyphicon glyphicon-bullhorn" aria-hidden="true"></span>导入
            </button>
            <button id="btn_delete" type="button" class="btn btn-default" onclick="doExportall()">
                <span class="glyphicon glyphicon-export" aria-hidden="true"></span>导出所有
            </button> -->
            
            
            <script type="text/javascript">
	        	function doExportFile() {
	        		Ewin.confirm({message : "确认要导出数据模板吗？"}).on(
    					function(e) {
   						if (!e) {return;}
						window.location.href="${pageContext.request.contextPath}/Role/doExportFile.do"; 
					})
				}
	        	function doExport() {
	        		Ewin.confirm({message : "确认要导出所有数据吗？"}).on(
    					function(e) {
   						if (!e) {return;}
						window.location.href="${pageContext.request.contextPath}/Role/doExport.do"; 
					})
				}
	        	function doExportall() {
	        		Ewin.confirm({message : "确认要导出所有数据吗？"}).on(
    					function(e) {
   						if (!e) {return;}
						window.location.href="${pageContext.request.contextPath}/Role/doExportall.do"; 
					})
				}
	        	
	        	function douploadModal() {
	        		$('#uploadModal').modal(open);
	        		//清空表单
	        		document.getElementById("importForm").reset();
	        	}
	        	
	        	function uploadBtn() {
	        		 var fileName = $("#fileInput").val();
	        		 if (fileName.length > 0) {
	        		     var formData = new FormData($("#importForm")[0]);  
	        		     $.ajax({  
	        		          url: '${pageContext.request.contextPath}/Role/uplodeFile.do' ,  
	        		          type: 'post',  
	        		          data: formData,
	        		          async: false,  
	        		          cache: false,  
	        		          contentType: false,  
	        		          processData: false,  
	        		          success: function (data) { 
	        		        	  if (data == 1) {
	        		        		  toastr.success("文件导入成功！");
	        		        		  setTimeout(function() {//使用setTimeout()方法设定定时2000毫秒
	        		        		    $('#uploadModal').modal('hide'); 
	        		        		   $('#tb_departments').bootstrapTable('refresh'); 
	        						  },1000);
	        		        	  }else if(data == -1){
	        		        		  toastr.warning("导入的数据不符合导入条件（角色不能重复，找不到对应的部门）！");  
	        		        	  }else{
	        		        		  toastr.warning("文件格式异常，文件导入失败！");  
	        		        	  }
	        		          },  
	        		          error: function (data) {
	        		        	  toastr.error("文件格式异常，文件导入失败！");  
	        		          }  
	        		     }); 
	        		 }else{
	        			 toastr.warning("上传文件为空，请选择要导入的文件！");  
	        		}
	        	}
	        	
            </script>
        </div>
        <table id="tb_departments"></table>
        <input type="hidden" id="id" value="-1">
        <table id="tb_departmentsDetailed"></table>
    </div>
    
    <div class="modal fade" id="uploadModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
   		<div class="modal-dialog" role="document">
    		<div class="modal-content">
      			<div class="modal-header">
        			<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        			<h4 class="modal-title" id="exampleModalLabel">
        				<span style="font-size:13px">excel导入</span>
        			</h4>
      			</div>
      			<div class="modal-body">
	        		<form id="importForm" class="form-horizontal">
	          			<div class="form-group">
							<label  class="col-sm-3 control-label"></label>
							<div class="col-sm-7"> 
		           				 <button id="btn_delete" type="button" class="btn btn-default" onclick="doExportFile()">
					                <span class="glyphicon glyphicon-export" aria-hidden="true"></span>导出
					            </button>
	          				 </div>
	          			</div>
	          			<div class="form-group">
				            <label class="col-sm-5 control-label">excel文件:</label>
				            <div class="col-sm-5"> 
					            <input id="fileInput" name="file" type="file" accept=".xls,.xlsx"/>
	          				</div>
	          			</div>
	        			<div class="form-group"> 
				   			<div class="col-sm-3 col-sm-offset-7">  
						        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						        <button type="submit"  name="submit"  class="btn btn-primary" id="ss" onclick="uploadBtn()">导入</button>
			      			</div>
			      		</div>
	        		</form>
	      		</div>
    		</div>
  		</div>
	</div>
    
    
      <div class="modal fade bs-example-modal-lg" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
   		<div class="modal-dialog  modal-lg" role="document">
    		<div class="modal-content">
      			<div class="modal-header">
        			<button type="button" class="close closefm" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        			<h4 class="modal-title" id="exampleModalLabel">
        				<span id="bt" style="font-size:13px"></span>
        			</h4>
      			</div>
      			<div class="modal-body">
	        		<form id="fm" class="form-horizontal" style="margin-right: 5%;">
	          			<div class="form-group">
				            <label class="col-sm-2 control-label">角色姓名:</label>
				            <div class="col-sm-4"> 
		            			 <input type="hidden" id="rid" name="rid" >
					            <input type="text" class="form-control" id="rname" name="rname">
					            <span class="xing"></span>
	          				</div>
				            <label class="col-sm-2 control-label">备注:</label>
				            <div class="col-sm-4"> 
					            <input type="text" class="form-control" id="rfield" name="rfield">
	          				</div>
	          			</div>
	          			<div class="form-group">
	          				<label class="col-sm-2 control-label">授权:</label>
				            <div class="col-sm-8"> 
				            	<input type="hidden" name="mids">
	          					<ul id="treeDemo" class="ztree"></ul>
	          				</div>
	          			</div>
	        			<div class="modal-footer"> 
				   			<div class="col-sm-3 col-sm-offset-10"> 
						        <button type="button" class="btn btn-default closefm" data-dismiss="modal" >关闭</button>
						        <button type="submit"  name="submit"  class="btn btn-primary" onclick="save()">保存</button>
			      			</div>
			      		</div>
	        		</form>
	      		</div>
    		</div>
  		</div>
	</div>
	
	<script type="text/javascript">
	$(function() {
		var layerTips = parent.layer === undefined ? layui.layer : parent.layer
		$("#fm").bootstrapValidator({
			feedbackIcons : {
				valid : 'glyphicon glyphicon-ok',
				invalid : 'glyphicon glyphicon-remove',
				validating : 'glyphicon glyphicon-refresh'
			},
			fields : {
				rname : {
					validators : {
						notEmpty : {
							message : '角色不能为空'
						},
						callback: {
                            message: '角色不能重复',
                            callback:function(value, validator){
                                var flg = false;
                                $.ajax({
                                    type:'post',
                                    data:'rname='+value,
                                    url:'${pageContext.request.contextPath}/Role/queryAllByMution.do',
					                dataType: 'JSON',
					                async: false,
                                    success:function (data) {
                                        if(data.length == 0){
                                            flg  = true;
                                        }else if(data.length == 1){
	                                        var ma = $.trim($('#rid').val());
	                                        if (ma == data[0].rid) {
	                                            flg  = true;
	                                        }else{
	                                        	flg = false;
	                                        }
                                        }else{
                                            flg = false;
                                        }

                                    }
                                });
                                return flg;
                            }
                        },
					}
				},

			},
		});
	});
	</script>
	
</body>
</html>